<template>
	<view class="container">
		<view class="uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
							:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			
			<!-- 未审核 -->
			<view v-if="current === 0">
				<view class="head">
					<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @cancel="cancel">
					</uni-search-bar>
					<view class="order">
						<image src="../../static/排序.png" mode="widthFix" @click="changeOrder"></image>
					</view>
				</view>
				
				<uni-list v-for="activity in activityList" >
					<uni-list-item>
						<template v-slot:body>
							<uni-card :title=activity.title :subTitle=activity.type padding="10px 0" margin="0px 0" @click="toCheck(activity.id,activity.title)">
								<template v-slot:cover>
									<image style="left:20% width: 386px; height: 200px" mode="aspectFit" :src="activity.pic"></image>
								</template>
									<text>{{activity.info}}</text>
							</uni-card>
						</template>
					</uni-list-item>
				</uni-list>
				
				<view>
					<uni-load-more :status=status @clickLoadMore="loadMore"></uni-load-more>
				</view>
				
			</view>
			
			
			<!-- 已审核 -->
			<view v-if="current === 1">
				<view class="head">
					<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @cancel="cancel">
					</uni-search-bar>
					<view class="order">
						<image src="../../static/排序.png" mode="widthFix" @click="changeOrder"></image>
					</view>
				</view>
				
				<uni-row class="uni-row" :width="nvueWidth">
					<uni-col :span="6" offset=5>
						<uni-tag :circle="true" :inverted="inverted[0]" text="已通过" type="primary" @click="setInverted(0)" />					
					</uni-col>
					<uni-col :span="6" offset=5>
					<uni-tag :circle="true" :inverted="inverted[1]" text="不通过" type="primary" @click="setInverted(1)" />
					</uni-col>
				
				</uni-row>
				
				<uni-list v-for="activity in activityList" >
					<uni-list-item>
						<template v-slot:body>
							<uni-card :title=activity.title :subTitle=activity.type padding="10px 0" margin="0px 0" @click="toDelete(activity.id,activity.title,activity.state)">
								<template v-slot:cover>
									<image style="left:20% width: 386px; height: 200px" mode="aspectFit" :src="activity.pic"></image>
								</template>
									<text>{{activity.info}}</text>
							</uni-card>
						</template>
					</uni-list-item>
				</uni-list>
				
				<view>
					<uni-load-more :status=status @clickLoadMore="loadMore"></uni-load-more>
				</view>
			</view>						
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nvueWidth: 730,
				apiUrl:"http://localhost:8080/",
				searchValue:"",
				// avatar:"/static/logo.png",
				inverted:[false,false],
				items: ['待审核', '已审核'],
				activeColor: '#007aff',
				current: 0,
				styleType: 'button',
				activityList:[
					
				],
				pageNum:1,
				pageSize:3,
				keyword:"",
				searchType:8,
				// searchType:12,
				order:false,
				status:"more",
				end:false,
				count:0
			}
		},
		onPullDownRefresh(){
			this.clear();
			this.searchActivity();
		},
		onShow(){
			// this.current=0;
			this.order=false;
			this.clear();
			this.searchActivity();
		},/* 
		onBackPress(){
			this.clear();
			this.searchActivity();
		}, */
		methods: {
			search() {
				this.clear();
				this.searchActivity();
			},
			cancel(){
				this.searchValue="";
			},
			toCheck(id,title){
				console.log(id);
				console.log(title);
				uni.navigateTo({
					url:"/pages/activity/activity-detail"+'?id='+id+'&title='+title
				});
			},
			toDelete(id,title,state){
				console.log(id);
				console.log(title);
				console.log(state);
				uni.navigateTo({
					url:"/pages/activity/activity-detail2"+'?id='+id+'&title='+title+'&state='+state
				});
			},
			setInverted(i){
				this.inverted[i] = !(this.inverted[i]);
				this.clear();
				console.log(this.inverted);
				var searchType = 0;
				if(!this.inverted[0]){
					searchType = searchType + 5;
				}
				if(!this.inverted[1]){
					searchType = searchType + 2;
				}
				this.searchType=searchType;
				console.log(this.searchType);
				this.searchActivity();
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.clear();
					
					if(this.current == 0)
					{
						this.searchType=8;
					}
					else if(this.current == 1)
					{
						this.inverted=[false,false];
						this.searchType=7;
					}
					this.searchActivity();
				}
			},
			changeOrder(){
				this.order=!this.order;
				this.clear();
				this.searchActivity();
			},
			searchActivity(){
				console.log(uni.getStorageSync('token'));
				console.log(this.pageNum);
				console.log(this.searchType);
				uni.request({
					method:'GET',
					url:this.apiUrl+'activity',
					header:{
							Authorization : uni.getStorageSync("token")
						},
					data:{
						'pageNum':this.pageNum,
						'pageSize':this.pageSize,
						'keyword':this.searchValue,
						'type':"",
						'orderBy':"id",
						'sequence':this.order,
						'byUsername':false,
						'state':this.searchType
					},			
					success: (res) => {
						let activities = res.data.records;
						let size =activities.length;
						for(let i =0;i<size;i++,this.count++){
							this.activityList.push({
								"id":activities[i].id,
								"title":activities[i].name,
								"info":activities[i].info,
								"type":activities[i].type,
								"state":activities[i].state,
								"pic":activities[i].pic1
							});
						}
						if(size<this.pageSize){
							this.end = true;
							this.status = "no-more";
						}
						uni.stopPullDownRefresh()
					},
				})
			},
			loadMore(){
				if(this.end)return;
				this.pageNum += 1;
				this.searchActivity();
			},
			clear(){
				this.end = false;
				this.status="more";
				this.pageNum=1;
				this.pageSize=3;
				this.count=0;
				this.activityList = [];
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.content{
		/* margin-top: 18px; */
	}
	.uni-row{
		padding-bottom: 10px;
	}
	.head{
		display: flex;
		flex-direction: row;
	}
	.head .uni-searchbar{
		width: 85%;
	}
	.head .order{
		position: relative;
		padding-top: 18px;
	}
	.head image{
		width: 20px;
	}
</style>
